<template>
    <div class="common-layout">
        <el-container>
            <el-main style="border-style: groove;border-width: 1.5px;height: 560px;margin-top: 40px;">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" width="60" label="序号" />
                    <el-table-column prop="id" label="审批ID" />
                    <el-table-column prop="stepName" label="审批步骤" />
                    <el-table-column prop="auditName" label="审批人" />
                    <el-table-column prop="state" label="审批状态">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.state == 0">未审批</el-tag>
                            <el-tag type="primary" v-else>已审批</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="审批意见" />
                    <el-table-column prop="auditType" label="审批类型" />
                    <el-table-column prop="createTime" label="完成时间">
                        <template v-slot="scope">
                            <el-tag type="primary" v-if="scope.row.createTime != null">{{ scope.row.createTime
                            }}</el-tag>
                            <el-tag type="primary" v-else>等待审批完成</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button @click="sp(scope.row)" v-if="scope.row.state==0" type="primary">审批</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="info.pageIndex" v-model:page-size="info.pageSize"
                        next-text="下一页" :page-sizes="[3, 4, 5, 6]" :size="size" :disabled="disabled" background
                        prev-text="上一页" layout="total, sizes, prev, pager, next, jumper" :total="info.totaCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>
    <el-dialog v-model="dialogFormVisible" title="审批" width="500">
        <el-form :model="form">
            <el-form-item label="审批类型" :label-width="formLabelWidth">
                <el-select v-model="form.auditType" placeholder="请选择审批类型">
                    <el-option label="通过" value="通过" />
                    <el-option label="拒绝" value="拒绝" />
                </el-select>
            </el-form-item>
            <el-form-item label="审批意见" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage, tabsEmits } from 'element-plus';
import { reactive, ref, onMounted } from 'vue';

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const size = ref('default')
const disabled = ref(false)
onMounted(() => {
    show()
})
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
const definition: any = ref([])

const tableData: any = ref([])

const info: any = reactive({
    pageIndex: 1,
    pageSize: 3,
    totaCount: 0,
    pageCount: 0,
    UserId: store.userInfo.id
})

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    "workflowId": "",
    "remark": "",
    "auditType": "",
    "userId": store.userInfo.id
})

const sp = (info: any) => {
    dialogFormVisible.value = true
    form.workflowId = info.workflowId
}


const save = () => {
    axios({
        url: 'http://59.110.123.186:4406/api/Management/AuditAdd',
        method: 'post',
        data: form
    })
        .then(res => {
            if (res.data.code == 100) {
                ElMessage.success(res.data.message);
                show();
                dialogFormVisible.value = false
            }
            else {
                ElMessage.error("审批失败");
            }
        })
}

const show = () => {
    axios({
        url: 'http://59.110.123.186:4405/api/Management/AuditShow',
        method: 'get',
        params: {
            pageIndex: info.pageIndex,
            pageSize: info.pageSize,
            UserId: info.UserId
        }
    })
        .then(res => {
            tableData.value = res.data.data.pageData
            info.totaCount = res.data.data.totaCount
            info.pageCount = res.data.data.pageCount

        })
}


</script>